/**
 * 详情
 */

import React, { Component } from 'react'

import config from '~/static/config'
import qs from 'query-string'
import moment from 'moment'

import Page from '@/components/Page'
import Comment from '@/components/Comment'

class Detail extends Component {

    state = {
        //加载状态
        loading: true,
        //数据
        data: {},
        //空状态
        isEmpty: true
    }

    componentDidMount() {
        this.fetchBLogDetail()
    }

    fetchBLogDetail = () => {
        const { id } = qs.parse(window.location.search)

        let body = new FormData()

        body.append('id', id)

        fetch(`${config.baseURL}/blog/detail`, {
            method: "POST",
            body
        })
            .then(response => {
                return response.json()
            })
            .then(res => {
                this.setState({
                    data: res.data,
                    loading: false,
                    isEmpty: !res.data.id
                })
            })
            .catch(err => {
                this.setState({
                    data: null,
                    loading: false,
                    isEmpty: true
                })
            })
    }

    refetchData = () => {
        this.fetchBLogDetail()
    }

    render() {

        const {
            loading,
            data,
            isEmpty,
        } = this.state


        return (<Page
            loading={loading}
            isEmpty={isEmpty}
        >
            <div className='detail'>
                <div className='main'>
                    <div className='title'>{data.title}</div>
                    <div className='content' dangerouslySetInnerHTML={{ __html: data.content }}></div>
                    <div className='time'>最近更新：{moment(+data.updateTime * 1000).format('YYYY-MM-DD HH:mm:ss')}</div>
                    <Comment
                        id={data.id}
                        visible={true}
                        data={data.comment}
                        refetchData={this.refetchData}
                    />
                </div>
            </div>

            {/* 样式 */}
            <style jsx>{`
                .detail {
                    padding: 110px 0 30px 0;
                    min-height: calc(100vh - 100px);
                }
                .main {
                    color: #000000;
                    max-width: 1200px;
                    margin: 0 auto;
                    box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
                    border-radius: 10px;
                    padding: 30px 20px;
                    box-sizing: border-box;
                }
                .title {
                    color: #f39d38;
                    font-size: 20px;
                    font-weight: bold;
                }
                .time {
                    border-top: 1px solid #f39d38;
                    margin-top: 20px;
                    padding-top: 16px;
                    color: #738a94;
                }
                .content {
                    margin-top: 14px;
                }
            `}</style>
        </Page>)
    }
}

export default Detail